<template>
<!-- 盒子 -->
  <div class="mod-prod">
    <div class="avue-crud avue-crud--card">
      <div class="el-card is-never-shadow avue-crud__search">
        <div class="el-card__body" v-if="flag == false">
          <div class="avue-form" style="width: 100%;">
            <el-form>
              <div class="el-row" span="24">
                <div class="avue-group avue-group--header" index="0" active="1">
                  <div class="el-collapse">
                    <div class="el-collapse-item is-active">
                      <div class="el-collapse-item__wrap">
                        <div class="el-collapse-item__content">
                          <div class="avue-form__group avue-form__group--flex">
                            <div class="el-col el-col-6 el-col-offset-0 el-col-xs-24 el-col-sm-12 el-col-md-6 avue-form__row" style="padding-left: 5px; padding-right: 5px;">
                              <el-form-item label="状态:" >
                                <el-select v-model="zt" placeholder="请选择状态">
                                  <el-option label="禁用" value="0"></el-option>
                                  <el-option label="正常" value="1"></el-option>
                                </el-select>
                              </el-form-item>
                            </div>
                            <div style="width:25%">
                              <div style="margin-bottom: 14px;">
                                <div class="el-form-item__content" style="margin-left: 0px;text-align: center;">
                                  <el-button @click="bt1" type="primary" style="padding: 7px 15px;font-size: 12px;" icon="el-icon-search">搜索</el-button>
                                  <el-button @click="bt2" type="primary" style="padding: 7px 15px;font-size: 12px;" icon="el-icon-delete">清空</el-button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-form>
          </div>
        </div>
      </div>
      <div class="el-card is-never-shadow">
        <div class="el-card__body">
          <div class="avue-crud__menu">
            <div class="avue-crud__left">
              <el-button type="primary" @click="xz" icon="el-icon-plus" style="font-size: 12px;padding: 9px 15px;">新增</el-button>
              <el-button v-show="length == 0" disabled type="primary" style="background-color:#FAB6B6;border-color:none;padding: 9px 15px;font-size: 12px">批量删除</el-button>
              <el-button v-show="length !=0" @click="fcjkad2" type="danger" style="border-color:none;padding: 9px 15px;font-size: 12px">批量删除</el-button>
            </div>
            <div class="avue-crud__right">
              <el-button @click="jdk1" style="padding: 9px;" icon="el-icon-refresh" circle></el-button>
              <el-button @click="jdk2" style="padding: 9px;" icon="el-icon-search" circle></el-button>
            </div>
          </div>
          <span class="avue-crud__tip el-tag el-tag--light">
            <span class="avue-crud__tip-name">当前表格已选择<span class="avue-crud__tip-count">{{length}}</span>项</span>
            <el-button @click="hecba" class="el-button--text" style="padding: 9px 15px;font-size: 12px;">清空</el-button>
          </span>
          <!-- 表格 -->
          <el-form>
            <el-table ref="multipleTable" header-align="center" border :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55" header-align="center"></el-table-column>
              <el-table-column label="轮播图片" width="320" header-align="center">
                <template slot-scope="scope">
                  <span><img :src="`http://admin.yami.byesame.com/apis/mall4j/img/${scope.row.imgUrl}`" alt="" style="width:100px;height:100px"></span>
                </template>     
              </el-table-column>
              <el-table-column prop="seq" label="顺序" width="300" header-align="center"></el-table-column>
              <el-table-column style="text-align:center" prop="status" label="状态" width="160" header-align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 1" >正常</span>
                  <span v-else>禁用</span>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="操作" show-overflow-tooltip header-align="center">
                  <template slot-scope="scope">
                    <el-button @click="one(scope.row,scope.$index)" type="primary" icon="el-icon-edit" style="padding: 9px 15px;">修改</el-button>
                    <el-button @click="two(scope.row,scope.$index)" type="danger" icon="el-icon-delete" style="padding: 9px 15px;">删除</el-button>
                  </template>
              </el-table-column>
            </el-table>
          </el-form>
          <!-- 分页器 -->
          <div class="avue-crud__pagination">
            <el-pagination background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 20, 30, 40,50,100]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
          <!-- 新增 -->
          <el-dialog title="新增" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
            <el-form :rules="rules" ref="formRef">
              <el-form-item label="轮播图片" prop="pass">
                <el-upload
                  class="avatar-uploader"
                  action="http://admin.yami.byesame.com/apis/admin/file/upload/element"
                  :show-file-list="false"
                  :http-request="customUpload"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item label="顺序">
                <el-input></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-radio v-model="radio" label="1">禁用</el-radio>
                <el-radio v-model="radio" label="2">正常</el-radio>
              </el-form-item>
              <el-form-item label="类型">
                <el-radio v-model="radio2" label="1">无</el-radio>
                <el-radio v-model="radio2" label="2">商品</el-radio>
              </el-form-item>
              <el-form-item v-show="radio2 == 2">
                <el-button size="small">选择商品</el-button>
              </el-form-item>
              <el-form-item >
                 <el-button @click="ok" type="primary">确定</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      // 状态值
      zt:"",
      tableData:[],
      // 分页器
      currentPage4:1,
      total:0,
      shu:1,
      ye:10,
      // 新增-模态框
      dialogVisible: false,
      // 状态单选框值
      radio:'2',
      // 类型单选框值
      radio2:'1',
      dialogImageUrl: '',
      rules: {  
        pass: [  
          { required: true, message: '请上传图片', trigger: 'blur' }, // 这里用 blur 触发可能不太合适，但主要是为了演示  
        ],  
      }, 
      // 时间戳
      timestamp:Math.floor(Date.now() / 1000),
      // 隐藏
      flag : false,
      // 已选数组
      multip:[],
      length:0,
      // 图片
      imageUrl: ''
    }
  },
  created(){
    this.getList()
    // 时间戳
    this.formattedDate()
  },
  methods:{
    // 时间戳
    formattedDate() {
      this.timestamp = Math.floor(Date.now() / 1000);
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    customUpload(param) {  
      // 假设你的令牌存储在 Vuex、localStorage 或 Vue 实例的 data 中  
      const token = sessionStorage.getItem("Authorization"); // 这里替换为你的令牌  
  
      // 创建一个 FormData 实例  
      const formData = new FormData();  
      formData.append('file', param.file); // 假设你的后端接口接收的字段名为 'file'  
  
      // 使用 axios 或其他 HTTP 客户端发送请求  
      // 这里以 axios 为例  
      this.$http.post('http://admin.yami.byesame.com/apis/admin/file/upload/element', formData, {  
        headers: {  
          'Authorization': `Bearer ${token}`, // 在这里挂载令牌  
          'Content-Type': 'multipart/form-data'  
        }  
      })  
      .then(response => {  
        // 处理上传成功的情况  
        if (param.onSuccess) {  
          param.onSuccess(response, param.file);  
        }  
      })  
      .catch(error => {  
        // 处理上传失败的情况  
        if (param.onError) {  
          param.onError(error, param.file);  
        }  
      });  
    }, 
    // 数据请求
    getList(){
      this.$http.get("http://admin.yami.byesame.com/apis/admin/indexImg/page",{params:{
        t:1723429279188,
        current:1,
        size:10
      }}).then((res)=>{
        this.tableData = res.data.records
        this.total = res.data.records.length
        console.log(this.tableData);
      })
    },
    handleSelectionChange(val) {
      this.multip = val;
      console.log(this.multip);
      this.length = val.length
      console.log("长度",this.length);
    },
    // 分页器 每页条数
    handleSizeChange(val){
      this.$http.get("http://admin.yami.byesame.com/apis/admin/indexImg/page",{params:{
        t:this.timestamp,
        current:this.shu,
        size:val
      }}).then((res)=>{
        this.tableData = res.data.records
      })
    },
    // 分页器 当前页
    handleCurrentChange(val){
      this.shu = val-1
      this.$http.get("http://admin.yami.byesame.com/apis/admin/indexImg/page",{params:{
        t:this.timestamp,
        current:this.shu,
        size:this.ye
      }}).then((res)=>{
        this.tableData = res.data.records
      })
    },
    // 搜索按钮
    bt1(){
      this.$http.get("http://admin.yami.byesame.com/apis/admin/indexImg/page",{params:{
        t:this.timestamp,
        current:1,
        size:10,
        status:this.zt
      }}).then((res)=>{
        this.tableData = res.data.records
      })
    },
    // 清空按钮
    bt2(){
      this.zt = ""
    },
    // 模态框空白关闭
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    // 新增
    xz(){
      this.dialogVisible = true
    },
    // 批量删除
    pl(){

    },
    // 模态框确定按钮
    ok(){
      console.log(this.pto);
      if(this.pto.length > 0){
        // this.$http.post("http://admin.yami.byesame.com/apis/admin/file/upload/element",{
          

        // })
      }else{
        this.$message.error('请上传图片');  
      }
    },
    // 修改
    one(){

    },
    // 删除
    two(row,index){
      console.log(row,index);
      let a = []
      a.push(row.imgId)
      this.$confirm('确定进行[删除]操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           this.$http.delete("http://admin.yami.byesame.com/apis/admin/indexImg",{data:a}).then((res)=>{
            this.getList()
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 刷新
    jdk1(){
      this.getList()
    },
    // 隐藏
    jdk2(){
      if(this.flag == false){
        this.flag = true
      }else{
        this.flag = false
      }
    },
    // 批量删除
    fcjkad2(){
      let gie = []
      for(let i = 0;i<this.multip.length;i++){
        gie.push(this.multip[i].imgId)
      }
      this.$confirm('确定进行[删除]操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete("http://admin.yami.byesame.com/apis/admin/indexImg",{
          data:gie
        }).then((res)=>{
          console.log(res);
          this.getList()
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    // 表格清空
    hecba(){
      if(this.multip.length!=0){
        this.multip = []
        this.getList()
      }
    },
  }
}
</script>

<style scped>
.mod-prod{
  box-sizing: border-box;
}
.avue-crud {
  margin: 0 auto;
  width: 100%;
}
.avue-crud--card .el-card {
  border: none;
}
.el-card {
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  transition: .3s;
}
.el-card, .el-message {
  border-radius: 4px;
  overflow: hidden;
}
.avue-crud--card .el-card__body {
  padding: 0;
}
.el-row {
  box-sizing: border-box;
}
.avue-group {
  width: 100%;
}
.el-collapse-item:last-child {
  margin-bottom: -1px;
}
.el-collapse-item__wrap {
  will-change: height;
  background-color: #fff;
  overflow: hidden;
  box-sizing: border-box;
  border-bottom: 1px solid #ebeef5;
}
.el-collapse-item__content{
  padding-bottom: 0;
}
.el-collapse-item__content {
  padding-bottom: 25px;
  font-size: 13px;
  color: #303133;
  line-height: 1.769230769230769;
}
.avue-form__group--flex {
  display: flex;
}
.avue-form__group {
  align-items: flex-start;
  flex-wrap: wrap;
  height: auto;
}
.avue-form__group .el-col {
    position: relative;
}
@media only screen and (min-width: 992px) {
    .el-col-md-6 {
        width: 25%;
    }
}
@media only screen and (min-width: 768px) {
    .el-col-sm-12 {
        width: 50%;
    }
}
.el-col-6 {
    width: 25%;
}
.el-col-offset-0 {
    margin-left: 0;
}
[class*=el-col-] {
    float: left;
    box-sizing: border-box;
}
.avue-crud__search .el-form-item--mini.el-form-item{
  margin-bottom: 14px;
}
.el-form-item--mini .el-form-item__content{
  line-height: 28px;
}
.el-form-item__content{
  margin-left: 45px;
}
.el-form-item{
  margin-left: 40px!important;
  margin-bottom: 14px;
}
.el-input__inner{
  height: 28px!important;
  font-size: 12px!important;
}
.el-form-item--mini .el-form-item__content{
  line-height: 28px;
}
.el-form-item__content {
    position: relative;
    font-size: 14px;
}
.avue-crud__menu {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
  min-height: 40px;
  height: auto;
  overflow: hidden;
  margin-bottom: 5px;
  background-color: #fff;
}
.el-tag {
  background-color: rgba(2, 161, 233, .1);
  padding: 0 10px;
  height: 32px;
  line-height: 30px;
  font-size: 12px;
  color: #02a1e9;
  border-radius: 4px;
  box-sizing: border-box;
  border: 1px solid rgba(2, 161, 233, .2);
  white-space: nowrap;
}
.avue-crud__tip {
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  font-size: 12px;
}
.avue-crud__tip-name {
  margin-right: 10px;
}
.avue-crud__tip-count {
  font-size: 16px;
  font-weight: 600;
}
.el-button--text {
  color: #02a1e9;
  background: 0 0;
  padding-left: 0;
  padding-right: 0;
}
td{
  text-align: center!important;;
}
.avue-crud__pagination {
  position: relative;
  padding: 25px 0 20px 20px;
  text-align: right;
}
.avue-crud__menu {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
  min-height: 40px;
  height: auto;
  overflow: hidden;
  margin-bottom: 5px;
  background-color: #fff;
}
/* 图片 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 180px;
  height: 180px;
  line-height: 180px;
  text-align: center;
}
.avatar {
  width: 180px;
  height: 180px;
  display: block;
}
.el-form-item__content {
  margin-left: 80px!important;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>